<template>
  <div>
    <el-card shadow="none">
      <div slot="header">
        <img src="../../image/logo.png">
        问卷分析-{{paper.title}}
        <el-button
          type="info"
          icon="el-icon-back" 
          size="mini"
          @click="$router.push({name:'papers'})"
          plain
        >返回</el-button>
      </div>
      <ve-histogram :data="total"></ve-histogram>
      <ve-pie :data="total"></ve-pie>
      <ve-line :data="total"></ve-line>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      answers: [],
      item: [],
      paper: [],
      vData: {
        columns: ["x", "y"],
        rows: [{ x: "优秀", y: "3" }, { x: "良好", y: "4" }]
      }
    };
  },
  computed: {
    total() {
      let rows = [];
      let res = {};
      let map = {};
      this.item.forEach(el => {
        res[el.id] = 0;
        map[el.item_name] = el.id;
        rows.push({
          x: el.item_name,
          y: ""
        });
      });
      this.answers.forEach(el => {
        el.content.forEach(sel => {
          res[sel.answer]++;
        });
      });
      rows.forEach(r => {
        r.y = res[map[r.x]];
      });
      return {
        columns: ["x", "y"],
        rows
      };
    }
  },
  created() {
    this.getPaper();
  },
  methods: {
    async getPaper() {
      const ret = await this.axios.get(`/papers/answer/${this.id}`);
      this.item = JSON.parse(ret.data.data.item);
      this.answers = ret.data.data.answers;
      this.paper = ret.data.data;
    }
  }
};
</script>

<style>
</style>
